<template>
  <div class="app-container">
    <!-- 使用通用头部组件 -->
    <AppHeader 
      :show-cart="false" 
      :cart-count="cart.length"
      search-placeholder="搜索..."
      @search="handleSearch"
      @search-change="(value) => searchQuery = value"
    />
    
    <div class="shop-content">

    <!-- 页面标题和VIP推广 -->
    <div class="shop-hero">
      <div class="hero-content">
        <h1 class="shop-title">会员购</h1>
        <p class="shop-subtitle">正版周边、限定手办、游戏周边一站式购齐</p>
        <div class="vip-promotion" v-if="!userStore.user?.isVip">
          <p><strong>开通VIP享9折优惠，解锁限定商品！</strong></p>
          <button class="vip-button" @click="openVipModal">立即开通</button>
        </div>
        <div class="vip-status" v-else>
          <p><strong>尊贵的VIP会员，享受全场9折优惠！</strong></p>
          <p>专属限定商品已解锁</p>
        </div>
      </div>
    </div>

    <!-- 主体内容区域 -->
    <div class="content-wrapper">
      <!-- 侧边栏导航 -->
      <SideNav 
        title="会员购"
        :tabs="categories"
        :activeTab="selectedCategory"
        @tab-click="selectCategory"
      />

      <!-- 商品列表 -->
      <main class="shop-main">
      <div class="product-grid">
        <div 
          v-for="product in filteredProducts" 
          :key="product.id"
          class="product-card"
          :class="{ 'vip-only': product.vipOnly, 'vip-discount': product.vipDiscount }"
        >
          <div class="product-thumbnail">
            <img :src="product.image" alt="商品图片" />
            <div class="vip-badge" v-if="product.vipOnly">VIP专享</div>
            <div class="discount-badge" v-if="product.vipDiscount">VIP 9折</div>
          </div>
          
          <div class="product-info">
            <h3 class="product-title">{{ product.title }}</h3>
            <div class="product-price">
              <span class="price-current" v-if="product.vipDiscount && userStore.user?.isVip">
                ¥{{ calculateVipPrice(product.price).toFixed(2) }}
              </span>
              <span class="price-current" v-else>
                ¥{{ product.price.toFixed(2) }}
              </span>
              <span class="price-original" v-if="product.vipDiscount">
                ¥{{ product.price.toFixed(2) }}
              </span>
            </div>
            <div class="product-stats">
              <span class="stat-item">{{ product.sales }} 已售</span>
              <span class="stat-item">{{ product.stock }} 库存</span>
            </div>
            
            <button 
              class="add-to-cart-button"
              @click="addToCart(product)"
              :disabled="product.vipOnly && !userStore.user?.isVip"
            >
              {{ product.vipOnly && !userStore.user?.isVip ? 'VIP专享' : '加入购物车' }}
            </button>
          </div>
        </div>
      </div>
      
      <!-- 无商品时显示 -->
      <div class="empty-state" v-if="filteredProducts.length === 0">
        <p>暂无符合条件的商品</p>
      </div>
    </main>

    <!-- 购物车侧边栏 -->
    <div class="cart-sidebar" :class="{ open: cartOpen }">
      <div class="cart-header">
        <h2>购物车</h2>
        <button class="close-cart" @click="closeCart">×</button>
      </div>
      
      <div class="cart-items">
        <div v-if="cart.length === 0" class="empty-cart">
          <p>购物车还是空的</p>
          <p class="empty-cart-hint">快去挑选心仪的商品吧~</p>
        </div>
        
        <div v-for="item in cart" :key="item.id" class="cart-item">
          <img :src="item.image" alt="商品图片" class="item-image" />
          <div class="item-info">
            <h4 class="item-title">{{ item.title }}</h4>
            <div class="item-price">
              <span class="item-price-current">
                ¥{{ item.price.toFixed(2) }}
              </span>
            </div>
          </div>
          <div class="item-quantity">
            <button class="quantity-button" @click="decreaseQuantity(item.id)">-</button>
            <span class="quantity">{{ item.quantity }}</span>
            <button class="quantity-button" @click="increaseQuantity(item.id)">+</button>
          </div>
          <button class="remove-item" @click="removeFromCart(item.id)">×</button>
        </div>
      </div>
      
      <div class="cart-footer" v-if="cart.length > 0">
        <div class="cart-summary">
          <div class="summary-item">
            <span>商品总价</span>
            <span class="summary-price">¥{{ calculateTotalPrice().toFixed(2) }}</span>
          </div>
          <div class="summary-item" v-if="userStore.user?.isVip">
            <span>VIP折扣</span>
            <span class="discount-price">-¥{{ calculateDiscount().toFixed(2) }}</span>
          </div>
          <div class="summary-total">
            <span>合计</span>
            <span class="total-price">¥{{ calculateFinalPrice().toFixed(2) }}</span>
          </div>
        </div>
        <button class="checkout-button" @click="checkout">立即结算</button>
      </div>
    </div>

    <!-- VIP开通弹窗 -->
    <div class="modal-overlay" v-if="vipModalOpen" @click="closeVipModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h2>开通VIP会员</h2>
          <button class="close-modal" @click="closeVipModal">×</button>
        </div>
        <div class="modal-body">
          <div class="vip-benefits">
            <h3>VIP会员特权</h3>
            <ul>
              <li>全场商品9折优惠</li>
              <li>专属限定商品购买权</li>
              <li>优先购买新品</li>
              <li>生日当月双倍积分</li>
              <li>专属客服通道</li>
            </ul>
          </div>
          <div class="vip-plans">
            <div class="vip-plan">
              <div class="plan-header">
                <h4>月卡</h4>
                <span class="plan-price">¥30</span>
              </div>
              <button class="select-plan" @click="subscribeVip('month')">立即开通</button>
            </div>
            <div class="vip-plan">
              <div class="plan-header">
                <h4>季卡</h4>
                <span class="plan-price">¥78</span>
                <span class="plan-discount">省12元</span>
              </div>
              <button class="select-plan" @click="subscribeVip('quarter')">立即开通</button>
            </div>
            <div class="vip-plan best-value">
              <div class="plan-header">
                <h4>年卡</h4>
                <span class="plan-price">¥288</span>
                <span class="plan-discount">省72元</span>
              </div>
              <div class="best-value-badge">最划算</div>
              <button class="select-plan" @click="subscribeVip('year')">立即开通</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    </div>
    </div>
    
    <!-- 悬浮购物车按钮 -->
    <div class="floating-cart-button" @click="openCart">
      <span class="cart-icon">🛒</span>
      <span class="cart-badge" v-if="cart.length > 0">{{ cart.length }}</span>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../store/user'
import AppHeader from '../components/AppHeader.vue'
import SideNav from '../components/SideNav.vue'

const router = useRouter()
const userStore = useUserStore()

// 状态管理
// 初始化时加载用户信息
onMounted(() => {
  userStore.loadUser()
})
const cartOpen = ref(false)
const vipModalOpen = ref(false)
const searchQuery = ref('')
const selectedCategory = ref('all')
const cart = ref([])

// 商品分类
const categories = [
  { key: 'all', name: '全部' },
  { key: 'figure', name: '手办' },
  { key: 'game', name: '游戏周边' },
  { key: 'acg', name: '动漫周边' },
  { key: 'limited', name: '限定商品' }
]

// 模拟商品数据
const products = [
  // 手办类
  {
    id: 1,
    title: '原神 雷电将军 1/7比例手办',
    image: 'https://picsum.photos/id/24/400/400',
    price: 899.00,
    sales: 256,
    stock: 120,
    category: 'figure',
    vipOnly: false,
    vipDiscount: true
  },
  {
    id: 2,
    title: '崩坏：星穹铁道 三月七 1/7比例手办',
    image: 'https://picsum.photos/id/96/400/400',
    price: 799.00,
    sales: 189,
    stock: 85,
    category: 'figure',
    vipOnly: false,
    vipDiscount: true
  },
  {
    id: 3,
    title: 'Fate/Grand Order 阿尔托莉雅 限定版手办',
    image: 'https://picsum.photos/id/42/400/400',
    price: 1299.00,
    sales: 87,
    stock: 35,
    category: 'figure',
    vipOnly: true,
    vipDiscount: true
  },
  
  // 游戏周边
  {
    id: 4,
    title: '塞尔达传说 林克大师剑 1:1复刻',
    image: 'https://picsum.photos/id/52/400/400',
    price: 499.00,
    sales: 342,
    stock: 95,
    category: 'game',
    vipOnly: false,
    vipDiscount: true
  },
  {
    id: 5,
    title: '英雄联盟 冠军皮肤 限定手办套装',
    image: 'https://picsum.photos/id/62/400/400',
    price: 1699.00,
    sales: 156,
    stock: 45,
    category: 'game',
    vipOnly: false,
    vipDiscount: true
  },
  {
    id: 6,
    title: '王者荣耀 李白 青莲剑仙 金属模型',
    image: 'https://picsum.photos/id/72/400/400',
    price: 399.00,
    sales: 234,
    stock: 88,
    category: 'game',
    vipOnly: false,
    vipDiscount: true
  },
  
  // 动漫周边
  {
    id: 7,
    title: '鬼灭之刃 炭治郎 灶门炭治郎 手办',
    image: 'https://picsum.photos/id/82/400/400',
    price: 699.00,
    sales: 421,
    stock: 156,
    category: 'acg',
    vipOnly: false,
    vipDiscount: true
  },
  {
    id: 8,
    title: '进击的巨人 艾伦·耶格尔 立体机动装置模型',
    image: 'https://picsum.photos/id/92/400/400',
    price: 899.00,
    sales: 289,
    stock: 78,
    category: 'acg',
    vipOnly: false,
    vipDiscount: true
  },
  
  // 限定商品
  {
    id: 9,
    title: '会员购限定 初音未来 15周年纪念版手办',
    image: 'https://picsum.photos/id/102/400/400',
    price: 1499.00,
    sales: 32,
    stock: 18,
    category: 'limited',
    vipOnly: true,
    vipDiscount: true
  },
  {
    id: 10,
    title: '会员购限定 七龙珠 悟空 超级赛亚人之神手办',
    image: 'https://picsum.photos/id/112/400/400',
    price: 1199.00,
    sales: 56,
    stock: 24,
    category: 'limited',
    vipOnly: true,
    vipDiscount: true
  },
  {
    id: 11,
    title: '海贼王 路飞 橡胶果实觉醒形态 限定手办',
    image: 'https://picsum.photos/id/122/400/400',
    price: 1399.00,
    sales: 45,
    stock: 20,
    category: 'limited',
    vipOnly: true,
    vipDiscount: true
  },
  {
    id: 12,
    title: '新世纪福音战士 EVA 明日香 限定版手办',
    image: 'https://picsum.photos/id/132/400/400',
    price: 1599.00,
    sales: 28,
    stock: 15,
    category: 'limited',
    vipOnly: true,
    vipDiscount: true
  }
]

// 计算过滤后的商品列表
const filteredProducts = computed(() => {
  let result = [...products]
  
  // 按分类过滤
  if (selectedCategory.value !== 'all') {
    result = result.filter(p => p.category === selectedCategory.value)
  }
  
  // 按搜索关键词过滤
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    result = result.filter(p => p.title.toLowerCase().includes(query))
  }
  
  // 非VIP用户只能看到非VIP专享商品
  if (!userStore.user?.isVip) {
    result = result.filter(p => !p.vipOnly)
  }
  
  return result
})

// 计算VIP价格
const calculateVipPrice = (originalPrice) => {
  return originalPrice * 0.9 // VIP 9折
}

// 计算购物车总价
const calculateTotalPrice = () => {
  return cart.value.reduce((total, item) => total + (item.price * item.quantity), 0)
}

// 计算VIP折扣金额
const calculateDiscount = () => {
  if (!userStore.user?.isVip) return 0
  return calculateTotalPrice() * 0.1 // 10%折扣
}

// 计算最终价格
const calculateFinalPrice = () => {
  if (userStore.user?.isVip) {
    return calculateTotalPrice() * 0.9
  }
  return calculateTotalPrice()
}

// 用户菜单相关功能已在AppHeader组件中实现

// 处理搜索
const handleSearch = () => {
  console.log('搜索商品:', searchQuery.value)
  // 搜索逻辑已经在计算属性中实现
}

// 选择分类
const selectCategory = (categoryId) => {
  selectedCategory.value = categoryId
}

// 打开购物车
const openCart = () => {
  cartOpen.value = true
}

// 关闭购物车
const closeCart = () => {
  cartOpen.value = false
}

// 添加到购物车
const addToCart = (product) => {
  if (product.vipOnly && !userStore.user?.isVip) {
    alert('此商品为VIP专享，请开通VIP后购买')
    return
  }
  
  const existingItem = cart.value.find(item => item.id === product.id)
  
  if (existingItem) {
    existingItem.quantity++
  } else {
    cart.value.push({
      ...product,
      quantity: 1
    })
  }
  
  alert('商品已添加到购物车')
}

// 减少商品数量
const decreaseQuantity = (productId) => {
  const item = cart.value.find(item => item.id === productId)
  if (item && item.quantity > 1) {
    item.quantity--
  } else {
    removeFromCart(productId)
  }
}

// 增加商品数量
const increaseQuantity = (productId) => {
  const item = cart.value.find(item => item.id === productId)
  if (item) {
    item.quantity++
  }
}

// 从购物车移除
const removeFromCart = (productId) => {
  cart.value = cart.value.filter(item => item.id !== productId)
}

// 结算
const checkout = () => {
  if (!userStore.isLoggedIn) {
    alert('请先登录')
    router.push('/login')
    return
  }
  
  if (cart.value.length === 0) {
    alert('购物车为空')
    return
  }
  
  // 检查是否包含VIP专享商品
  const hasVipOnlyItems = cart.value.some(item => item.vipOnly)
  if (hasVipOnlyItems && !userStore.user?.isVip) {
    alert('购物车中包含VIP专享商品，请开通VIP后结算')
    return
  }
  
  alert(`订单提交成功！总价：¥${calculateFinalPrice().toFixed(2)}`)
  cart.value = []
  closeCart()
}

// 打开VIP开通弹窗
const openVipModal = () => {
  if (!userStore.isLoggedIn) {
    alert('请先登录')
    router.push('/login')
    return
  }
  vipModalOpen.value = true
}

// 关闭VIP开通弹窗
const closeVipModal = () => {
  vipModalOpen.value = false
}

// 订阅VIP
const subscribeVip = (plan) => {
  let price = 0
  let duration = ''
  
  switch (plan) {
    case 'month':
      price = 30
      duration = '月'
      break
    case 'quarter':
      price = 78
      duration = '季'
      break
    case 'year':
      price = 288
      duration = '年'
      break
  }
  
  // 模拟开通VIP
  setTimeout(() => {
    // 更新用户信息
    userStore.updateUser({ isVip: true, vipExpiry: new Date(Date.now() + (plan === 'month' ? 30 : plan === 'quarter' ? 90 : 365) * 24 * 60 * 60 * 1000) })
    alert(`恭喜！您已成功开通${duration}卡VIP会员，享受全场9折优惠！`)
    closeVipModal()
  }, 1000)
}

// 初始化检查登录状态
if (!userStore.isLoggedIn) {
  // 未登录用户也可以浏览，但无法购买VIP专享商品
  console.log('游客模式访问会员购页面')
}
</script>

<style scoped>
/* 全局样式 */
.app-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.shop-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 页面标题和VIP推广 */
.shop-hero {
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  color: white;
  padding: 40px 0;
  text-align: center;
  margin-bottom: 30px;
}

.hero-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.shop-title {
  font-size: 36px;
  margin: 0 0 10px 0;
  font-weight: bold;
}

.shop-subtitle {
  font-size: 18px;
  margin: 0 0 20px 0;
  opacity: 0.9;
}

.vip-promotion {
  background-color: rgba(255, 255, 255, 0.2);
  padding: 20px;
  border-radius: 10px;
  display: inline-block;
}

.vip-promotion p {
  margin: 0 0 15px 0;
  font-size: 16px;
}

.vip-button {
  background-color: #ffc107;
  color: #333;
  border: none;
  padding: 10px 30px;
  border-radius: 30px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.vip-button:hover {
  background-color: #ffca2c;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
}

.vip-status {
  background-color: rgba(255, 255, 255, 0.2);
  padding: 20px;
  border-radius: 10px;
  display: inline-block;
}

.vip-status p {
  margin: 5px 0;
  font-size: 16px;
}

/* 内容包装器 */
.content-wrapper {
  max-width: 1200px;
  margin: 0 auto 30px;
  padding: 0 20px;
  display: flex;
  gap: 20px;
}

/* 侧边栏导航 */
.side-nav {
  width: 200px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
  height: fit-content;
  position: sticky;
  top: 90px;
}

.side-nav-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e8e8e8;
}

.side-nav-tabs {
  list-style: none;
  padding: 0;
  margin: 0;
}

.side-nav-tab {
  padding: 12px 15px;
  margin-bottom: 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.side-nav-tab:hover {
  background-color: #f0f2f5;
  color: #4CAF50;
}

.side-nav-tab.active {
  background-color: #4CAF50;
  color: white;
  border-color: #4CAF50;
}

/* 主内容区域 */
.shop-main {
  flex: 1;
  min-width: 0;
}

/* 商品列表 */
.shop-main {
  max-width: 1200px;
  margin: 0 auto 50px;
  padding: 0 20px;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 30px;
}

.product-card {
  background-color: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.product-card.vip-only::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #ffc107, #ff9800);
}

.product-card.vip-discount::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 40px 40px 0;
  border-style: solid;
  border-color: transparent #ff9800 transparent transparent;
}

.product-thumbnail {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
}

.product-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.product-card:hover .product-thumbnail img {
  transform: scale(1.05);
}

.product-thumbnail .vip-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;
}

.discount-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #ff5722;
  color: white;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: bold;
  z-index: 10;
}

.product-info {
  padding: 16px;
}

.product-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin: 0 0 12px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

.product-price {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.price-current {
  font-size: 20px;
  font-weight: bold;
  color: #ff4d4f;
}

.price-original {
  font-size: 14px;
  color: #999;
  text-decoration: line-through;
}

.product-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.product-stats .stat-item {
  font-size: 14px;
  color: #666;
}

.add-to-cart-button {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.add-to-cart-button:hover:not(:disabled) {
  background-color: #45a049;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.add-to-cart-button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #999;
  font-size: 16px;
}

/* 购物车侧边栏 */
.cart-sidebar {
  position: fixed;
  top: 0;
  right: -400px;
  width: 400px;
  height: 100vh;
  background-color: white;
  box-shadow: -5px 0 25px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  transition: right 0.3s ease;
  display: flex;
  flex-direction: column;
}

.cart-sidebar.open {
  right: 0;
}

.cart-header {
  padding: 20px;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-header h2 {
  margin: 0;
  font-size: 20px;
  color: #333;
}

.close-cart {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.close-cart:hover {
  background-color: #f0f2f5;
  color: #333;
}

.cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.empty-cart {
  text-align: center;
  padding: 60px 20px;
  color: #999;
}

.empty-cart p {
  margin: 0 0 10px 0;
  font-size: 16px;
}

.empty-cart-hint {
  font-size: 14px;
}

.cart-item {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #e8e8e8;
}

.cart-item:last-child {
  border-bottom: none;
}

.item-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  margin-right: 15px;
}

.item-info {
  flex: 1;
}

.item-title {
  font-size: 14px;
  color: #333;
  margin: 0 0 8px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

.item-price-current {
  font-size: 16px;
  font-weight: bold;
  color: #ff4d4f;
}

.item-quantity {
  display: flex;
  align-items: center;
  margin: 0 15px;
}

.quantity-button {
  width: 24px;
  height: 24px;
  background-color: #f0f2f5;
  border: 1px solid #ddd;
  color: #333;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.quantity-button:hover {
  background-color: #4CAF50;
  color: white;
  border-color: #4CAF50;
}

.quantity {
  margin: 0 10px;
  min-width: 30px;
  text-align: center;
  font-size: 14px;
}

.remove-item {
  background: none;
  border: none;
  color: #999;
  font-size: 20px;
  cursor: pointer;
  padding: 5px;
  transition: color 0.3s ease;
}

.remove-item:hover {
  color: #ff4d4f;
}

.cart-footer {
  padding: 20px;
  border-top: 1px solid #e8e8e8;
  background-color: #fafafa;
}

.cart-summary {
  margin-bottom: 20px;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 14px;
  color: #666;
}

.summary-price {
  font-weight: 500;
}

.discount-price {
  color: #ff4d4f;
  font-weight: 500;
}

.summary-total {
  display: flex;
  justify-content: space-between;
  padding-top: 15px;
  border-top: 1px solid #e8e8e8;
  font-size: 16px;
  font-weight: 500;
}

.total-price {
  font-size: 20px;
  color: #ff4d4f;
  font-weight: bold;
}

.checkout-button {
  width: 100%;
  background-color: #ff4d4f;
  color: white;
  border: none;
  padding: 14px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.checkout-button:hover {
  background-color: #f5222d;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 77, 79, 0.3);
}

/* 悬浮购物车按钮 */
.floating-cart-button {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 70px;
  height: 70px;
  background-color: #4CAF50;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  z-index: 999;
}

.floating-cart-button:hover {
  background-color: #45a049;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.cart-icon {
  font-size: 28px;
}

.cart-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: #ff4d4f;
  color: white;
  font-size: 14px;
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 50%;
  min-width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* VIP开通弹窗 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.modal-content {
  background-color: white;
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.modal-header {
  padding: 24px;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h2 {
  margin: 0;
  font-size: 24px;
  color: #333;
}

.close-modal {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.close-modal:hover {
  background-color: #f0f2f5;
  color: #333;
}

.modal-body {
  padding: 24px;
}

.vip-benefits {
  margin-bottom: 30px;
}

.vip-benefits h3 {
  font-size: 20px;
  color: #333;
  margin: 0 0 15px 0;
}

.vip-benefits ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.vip-benefits li {
  padding: 10px 0;
  padding-left: 30px;
  position: relative;
  font-size: 16px;
  color: #666;
}

.vip-benefits li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #4CAF50;
  font-weight: bold;
  font-size: 18px;
}

.vip-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.vip-plan {
  border: 2px solid #e8e8e8;
  border-radius: 10px;
  padding: 20px;
  position: relative;
  transition: all 0.3s ease;
}

.vip-plan:hover {
  border-color: #ffc107;
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(255, 193, 7, 0.2);
}

.vip-plan.best-value {
  border-color: #ffc107;
  background-color: rgba(255, 193, 7, 0.05);
}

.best-value-badge {
  position: absolute;
  top: -15px;
  right: 20px;
  background-color: #ff9800;
  color: white;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 15px;
  font-weight: bold;
}

.plan-header h4 {
  font-size: 16px;
  color: #333;
  margin: 0 0 10px 0;
}

.plan-price {
  font-size: 24px;
  font-weight: bold;
  color: #ff4d4f;
  margin-right: 8px;
}

.plan-discount {
  font-size: 14px;
  color: #4CAF50;
  background-color: rgba(76, 175, 80, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
}

.select-plan {
  width: 100%;
  background-color: #ffc107;
  color: #333;
  border: none;
  padding: 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 15px;
  transition: all 0.3s ease;
}

.select-plan:hover {
  background-color: #ffca2c;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    gap: 16px;
    padding: 16px;
  }
  
  .main-nav ul {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .user-actions {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .search-box input {
    width: 250px;
  }
  
  .shop-title {
    font-size: 28px;
  }
  
  .shop-subtitle {
    font-size: 16px;
  }
  
  .product-grid {
    grid-template-columns: 1fr;
  }
  
  .cart-sidebar {
    width: 100%;
    right: -100%;
  }
  
  .vip-plans {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .shop-hero {
    padding: 30px 0;
  }
  
  .shop-title {
    font-size: 24px;
  }
  
  .product-grid {
    grid-template-columns: 1fr;
  }
  
  .modal-content {
    width: 95%;
    margin: 20px;
  }
}
</style>